<template>
   <div class="home">
      {{cityName}}
      <p>{{count}}</p>
      <button @click="INCREMENT(2)">INCREMENT</button>
      <button @click="DECREMENT(1)">DECREMENT</button>
      <button @click="getCityWeather(cityName)">获取天气</button>
   </div>
</template>

<script lang="ts">
   import {Component, Vue} from 'vue-property-decorator'
   import {Action, Getter, Mutation} from "vuex-class"

   @Component
   export default class Home extends Vue {
      cityName: string = 'shanghai'

      @Getter('count') count: number
      @Mutation('INCREMENT') INCREMENT: Function
      @Mutation('DECREMENT') DECREMENT: Function
      @Action('getTodayWeather') getTodayWeather: Function

      getCityWeather(name: string) {
         this.getTodayWeather({city: name}).then((res: Ajax.AjaxResponse) => {
            const {low, high, type} = res.data.forecast[0]
            console.log(`${name}今日：${type} ${low} - ${high}`)
         }).catch((error: object) => {
            console.log('error', error)
         })
      }
   }
</script>

<style scoped>

</style>
